<template>
    <div style="padding-bottom: 130px;">
        <div v-for="(item,index) in form" :key="index">
			<!-- <div class="big_title" v-if="item.type==1">
			   一、单选题
			</div> -->
            <div class="title" v-if="item.type==1">
               {{index + 1}}. {{item.question}}（单选题）
            </div>
            <div class="title" v-if="item.type==2">
               {{index + 1}}. {{item.question}}（多选题）
            </div>
            <div class="title" v-if="item.type==3">
               {{index + 1}}. {{item.question}}（判断题）
            </div>
			<div class="title" v-if="item.type==4">
			   {{index + 1}}. {{item.question}}（填空题）
			</div>
            <div class="radio" v-if="item.type==1">
                <van-radio-group v-model="item.radio" direction="horizontal" :disabled="is_disabled">
                    <van-radio :name="item1.option" v-for="(item1,index1) in item.options" :key="index1">{{item1.option}}:{{item1.description}} </van-radio>
                </van-radio-group>
            </div>
            <div class="radio" v-if="item.type==2">
                <van-checkbox-group  v-model="item.duoxuanradio" direction="horizontal" :disabled="is_disabled">
                    <van-checkbox :name="item1.option" v-for="(item1,index1) in item.options" :key="index1">{{item1.option}}:{{item1.description}} </van-checkbox>
                </van-checkbox-group>
            </div>
            <div class="radio" v-if="item.type==3">
                <van-radio-group v-model="item.radio" direction="horizontal" :disabled="is_disabled">
                    <van-radio :name="1">正确</van-radio>
                    <van-radio :name="0">错误</van-radio>
                </van-radio-group>
            </div>
			<div class="text" v-if="item.type==4">
			    <van-tiankong-group v-model="item.tiankong" direction="horizontal">
					
					<input type="text" style="border: none; border-bottom: 1px solid #333; width: 80%; margin-right: 10px; margin-left: 10px; margin-top: 10px;" v-for="(item1,index1) in item.answer" :key="index1" :placeholder="item1.option" v-model="item1.answer1" :disabled="is_disabled">
					
			    </van-tiankong-group>
			</div>
			
            <!-- <div class="hint" v-show="item.show" v-if="item.type!=4">
            正确答案是{{item.answer}}
            <p>解析:{{item.exp}}</p>
            </div>
			<div class="hint" v-show="item.show" v-if="item.type==4">
			正确答案是{{item.answer.description}}
			<p>解析:{{item.exp}}</p>
			</div> -->
			
        </div>
        <!-- <div class="score">答对了{{correct}}道，分数：{{score}}</div> -->
        <van-button round block type="info" @click="submit" :disabled = "is_disabled">提交</van-button>
    </div>
</template>
<script>
	import Cookies from 'js-cookie'
export default {
	
    data() {
        return {
            form: [
                {title:'题目：', radio: 0, answer: '选择1', answer2: '选择2', answer3: '选择3', answer4: '选择4', show:false,correct:1},
                {title:'题目：', radio: 0, answer: '选择1', answer2: '选择2', answer3: '选择3', answer4: '选择4', show:false,correct:1},
                {title:'题目：', radio: 0, answer: '选择1', answer2: '选择2', answer3: '选择3', answer4: '选择4', show:false,correct:1},
                {title:'题目：', radio: 0, answer: '选择1', answer2: '选择2', answer3: '选择3', answer4: '选择4', show:false,correct:1},
                {title:'题目：', radio: 0, answer: '选择1', answer2: '选择2', answer3: '选择3', answer4: '选择4', show:false,correct:1},
            ],
            correct:0,
            score:0,
            list:[],
            radio:"",
            onedanxuanfenshu:"",
            oneduoxuanfenshu:"",
            onepanduanfenshu:"",
			onetiankongfenshu:"",
            danxuanfenshu:"",
            duoxuanfenshu:"",
            panduanfenshu:"",
			tiankongfenshu:"",
            danxuancorrect:0,
            duoxuancorrect:0,
            panduancorrect:0,
			tiankongcorrect:0,
            jrtime:0,
            tjtime:0,
			is_disabled:false,
        }
    },
    methods:{
		// toOrder() {
		//     let domainname = this.$route.params.domainname; //获取店铺名
		//     let FrontUrl = window.location.protocol + '//' + window.location.host;
		//     const nexturl = FrontUrl + `/xuejing/order/${domainname}?id=${this.id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
		//     let url = this.$front.getWeiXinOpenId + `?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
		//     window.location.href = url;
		//     // this.$router.push({ name: 'order', query: { id: this.id } });
		// },
       submit(){
		   
		   // this.$router.push({
		   // 	name: 'answerdetail',
		   // 	query: {
		   // 		id: id
		   // 	}
		   // });
		   
			// console.log(this.form);
			// return;
			
		   let is_have_null = true;	//表单 是否有空值
		   
            this.tjtime=Date.now();
			
            for(let i=0;i<this.form.length;i++){
				
                if(this.form[i].type==1){
                    if(this.form[i].radio!=this.form[i].answer){
						this.form[i].show=true
                    }else{
						this.danxuancorrect++;
						this.form[i].show=false
					}
					
					if(this.form[i].radio == '' || this.form[i].radio == null){
						is_have_null = false;
					}
                }
                if(this.form[i].type==3){
                    if(this.form[i].radio!=this.form[i].answer){
                    this.form[i].show=true
                    }else{
                    this.panduancorrect++;
                    this.form[i].show=false
                  }
				  
				  if(this.form[i].radio == 0 || this.form[i].radio == 1){
				  	is_have_null = true;
				  }else{
					is_have_null = false;
				  }
                }
                if(this.form[i].type==2){
                    this.form[i].duoxuanradio.sort();
                    let temp=this.form[i].duoxuanradio.toString();
                    this.form[i].radio=temp;
                    if(temp!=this.form[i].answer){
                    this.form[i].show=true
                    }else{
                    this.duoxuancorrect++;
                    this.form[i].show=false
                  }
				  
				  if(this.form[i].radio == '' || this.form[i].radio == null){
				  	is_have_null = false;
				  }
                }
                if(this.form[i].type==4){
                    let temp=this.form[i].answer;
					let is_show = [];
					temp.forEach(function(item){
						if(item.answer1 != item.description){
							is_show.push(true);
						}else{
							is_show.push(false);
						}
						
						if(item.answer1 == '' || item.answer1 == null){
							is_have_null = false;
						}
					});
					
					if(is_show.indexOf(true) != -1){
						this.form[i].show=true;
					}else{
						this.tiankongcorrect++;
						this.form[i].show=false;
					}
                }
            }
			
			if(!is_have_null){
				this.$dialog({title:'提示',message:'有未答题，请作答'});
				// this.is_disabled =true;
				this.danxuancorrect=0;
				this.duoxuancorrect=0;
				this.panduancorrect=0;
				this.tiankongcorrect=0;
				return;
			}else{
				this.is_disabled =true;
			}
			
             this.danxuanfenshu=this.onedanxuanfenshu*this.danxuancorrect;
             this.duoxuanfenshu=this.oneduoxuanfenshu*this.duoxuancorrect;
             this.panduanfenshu=this.onepanduanfenshu*this.panduancorrect;
			 this.tiankongfenshu=this.onetiankongfenshu*this.tiankongcorrect;
			 
             let allcorrect=this.danxuancorrect+this.duoxuancorrect+this.panduancorrect+this.tiankongcorrect;
             this.score=this.danxuanfenshu+this.duoxuanfenshu+this.panduanfenshu+this.tiankongfenshu;
             this.$dialog({title:'成绩',message:`答对了${allcorrect}道,分数:${this.score}`});
             let time=(this.tjtime-this.jrtime)/1000;
             let arr=[];
             for(let j=0;j<this.form.length;j++){
                  let qid=this.form[j].id;
                  let answer=this.form[j].radio;
                  let zuoda={qid,answer};
                  arr.push(zuoda);
             }
             let query={
                   id:this.$route.query.id,
                   time,
                   score:this.score,
                   jrtime:this.jrtime,
                   tjtime:this.tjtime,
                   answer:JSON.stringify(arr)
             }
             // this.$frontaxios.post(this.$front.addUserExam,query);
			 
			 // console.log(localStorage.getItem('fronttoken'));
			 // console.log(localStorage.getItem('domainname'));
			 
			 let res = this.$frontaxios.post(this.$front.addUserExam,query);
			 res.then(res => {
				 
				 if (res.code == 1) {
					 Cookies.set('fronttoken', localStorage.getItem('fronttoken'));
					 Cookies.set('domainname', localStorage.getItem('domainname'));
					 
					 this.$router.push({
						 name : 'answerdetail',
						 query: {
							 id:this.$route.query.id,
						 }
					 })
					 
				 }
			 })
			 this.danxuancorrect=0;
			 this.duoxuancorrect=0;
			 this.panduancorrect=0;
			 this.tiankongcorrect=0;
			 
        }
		
    },async created(){
        this.jrtime=Date.now();
        let id=this.$route.query.id;
        let columnid=this.$route.query.columnid;
        let query={
            id,
            columnid
        }
        let res=await this.$frontaxios.post(this.$front.getExamList,query);
        if(res.code==1){
        this.form=res.data.list;
		res.data.list.filter(item=>{
			if(item.type == 4){
				item.answer = JSON.parse(item.answer);
			}
		})
        this.onedanxuanfenshu=res.data.onedanxuanfenshu;
        this.oneduoxuanfenshu=res.data.oneduoxuanfenshu;
        this.onepanduanfenshu=res.data.onepanduanfenshu;
		this.onetiankongfenshu=res.data.onetiankongfenshu;
		}
       else if(res.code==-5){
			this.$dialog.alert({title:"温馨提示",message:"没有查询到你兑换了课程和可能使用期限已到或没到！"}).then(()=>{
				this.$router.back();
			})
			return;
		}
    }
}
</script>
<style lang='scss' scoped>
.title{
    margin: 0.5rem 0 0.5rem 1rem;
    font-size: 14px;
    color: #646566;
	
	padding-top: 2rem;
}
.big_title{
    /* margin: 0.5rem 0 0.5rem 1rem; */
	margin: 0 0 0 1rem;
    font-size: 20px;
    color: #000;
	
	/* padding-top: 2rem; */
}
.radio{
    margin: 0.3rem 0 0 0.3rem;
    font-size: 14px;
}
.van-button{
    position: fixed;
    bottom: 0.5rem;
}
.hint{
    color: red;
    font-size: 14px;
}
.score{
    position: fixed;
    bottom: 4rem;
    right: 3rem;
}
</style>
